<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个漂亮的网站</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 代码规范遵循网易nec -->
    <!-- 主体部分 -->
    <main class="g-main">
        <div class="m-helloworld">
            <div class="helloworld-bg">
                <h2>Hello World</h2>
                <p class="helloworld-subtitle">China is speeding up strategic plan.standards,traffic rules,laws and regulations on accident-incurred liabilities for its smart car industry.Economic Information Daily reported Thursday.</p>
                <form action="#" class="u-signup">
                    <div class="signup-title">CREATE YOUR ACCOUNT</div>
                    <p class="signup-subtitle">IT IS ABSOLUTELY FREE</p>
                    <input type="text" value="zengtv@outlook.com" class="signup-id"><input type="password" placeholder="Create your password" class="signup-psw"><input type="button" value="SIGN UP" class="signup-sbm">
                </form>
            </div>
        </div>
        <div class="m-introduce1">
            <p class="introduce1-subtitle">SOATLOADS OF AWESOME</p>
            <h2>Ready-made,customizable,HTML landing page sections</h2>
            <ul class="introduce1-list">
                <li class="introduce1-list1">
                    <div>Mobil First</div>
                    <span>All moduls are built mobile first for maximum device compatibility.</span>
                </li>
                <li class="introduce1-list2" style="margin-right: 0;">
                    <div>Accessibility</div>
                    <span>Support for IE8. mobil and table devices screenreaders and color blind.</span>
                </li>
                <li class="introduce1-list3">
                    <div>Fluid Typography</div>
                    <span>On different screen size,fonts automagically scale with the viewport.</span>
                </li>
                <li class="introduce1-list4" style="margin-right: 0;">
                    <div>Customization</div>
                    <span>Make any design your own using the Style Editor.Personalize fonts,colors and layout to create the custom look you want</span>
                </li>
            </ul>
        </div>
        <div class="m-supportive">
            <div class="supportive-bg">

                <div class="g-supright">
                    <div class="supright-point"></div>
                    <div class="supright-bg"></div>
                </div>
                <div class="g-supleft">
                    <h2>Supportive policies for China's smart car</h2>
                    <p class="supportive-subtitle">China will come up with its own smart car standards,traffic rules,laws and regulations relating to safety, according to the China Industry Innovation Alliance for the Intelli-gent and Connected Vehicles</p>
                    <button type="button" class="btn-check">CHECK OUT FEATURES</button>
                    <button type="button" class="btn-try">TRY PRODUCT FOR FREE</button>
                </div>
            </div>
        </div>
        <div class="m-introduce2">
            <h2>Try Our Awesome Products</h2>
            <ul class="introduce2-list">
                <li class="introduce2-list1">Li Jun. a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architec- ture and standards for test grounds.</li>
                <li class="introduce2-list2">Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan ($158.15 billion) and also able to boost fast development in 5G. internet of cars, big data, artificial intelligence and new-energy vehicles.</li>
                <li class="introduce2-list3" style="margin-right: 0">Zhang Junyi. a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.</li>
            </ul>
        </div>
        <div class="m-ad">
            <div class="ad-1">
                <img src="images/ad-1.jpg" alt="" class="ad-img f-fl" >
                <div class="m-ad-txt f-fr">
                    <div>Learn How to Improve Your Personal Business</div>
                    <p>Li Jun. a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architec- ture and standards for test grounds.</p>
                </div>
            </div>
            <div class="ad-2">
                <div class="m-ad-txt f-fl">
                    <div>Choose Between Two Beautifully Designed Color Schemes</div>
                    <p>China will come up with its own smart car standards,traffic rules,laws and regulations relating to safety, according to the China Industry Innovation Alliance for the Intelli-gent and Connected Vehicles</p>
                </div>
                <img src="images/ad-2.jpg" alt="" class="ad-img f-fr">
            </div>
        </div>
        <div class="m-person">
            <h2>Our Awesome Crew</h2>
            <p class="person-subtitle">Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new job,bush up on your skills.</p>
            <ul class="person-list">
                <li class="person-list1">
                    <a href="#">
                        <span>Ethan Dutton</span>
                        <p>SENIOR VISUAL DESIGNER</p>
                    </a>
                </li>
                <li class="person-list2">
                    <a href="#">
                        <span>Ethan Dutton</span>
                        <p>SENIOR VISUAL DESIGNER</p>
                    </a>
                </li>
                <li class="person-list3">
                    <a href="#">
                        <span>Ethan Dutton</span>
                        <p>SENIOR VISUAL DESIGNER</p>
                    </a>
                </li>
                <li class="person-list4">
                    <a href="#">
                        <span>Ethan Dutton</span>
                        <p>SENIOR VISUAL DESIGNER</p>
                    </a>
                </li>
            </ul>

        </div>
        <!-- 联系我们 -->
        <div class="m-contactus">
            <form action="#" class="contactus-form">
                <span>FELL FREE TO WRITE US</span>
                <input type="text" placeholder="E-mail">
                <input type="text" placeholder="Subject">
                <textarea  placeholder="Message"></textarea>
                <input type="button" value="SEND" style="width: 315px;background-color: #000;border: none;color: #fff;cursor: pointer;">
            </form>
            <div class="contactus-msg">
                <span>Contacts</span>
                <p>Make any design your own using the Style Editor.Personalize fonts,colors,and layouts to create the custom look you want.</p>
                <div class="u-position">
                    <p><i class="fa fa-location-arrow"></i> 360 King Street &nbsp;Feastrvale Trevose,PA 19057</p>
                </div>
                <div class="u-phone">

                    <p><i class="fa fa-phone"></i> (755)564-84-12</p>
                </div>
                <div class="u-email">

                    <p><i class="fa fa-envelope"></i> youname@mail.com</p>
                </div>
            </div>
        </div>
    </main>
    <!-- 尾部 -->
    <footer class="g-foot">
        <ul class="foot-more">
            <li>LEARN MORE</li>
            <li>How it works?</li>
            <li>Meeting tools</li>
            <li>Live streaming</li>
            <li>Contact method</li>
        </ul>
        <ul class="foot-about">
            <li>ABOUT US</li>
            <li>About us</li>
            <li>Features</li>
            <li>Privacy police</li>
            <li>Terms&Conditions</li>
        </ul>
        <ul class="foot-support">
            <li>SUPPORT</li>
            <li>F A Q</li>
            <li>Contact us</li>
            <li>Live chat</li>
            <li>Phone call</li>
        </ul>
        <ul class="foot-enjoy">
            <li>ENJOY YOUR LIFE</li>
            <li>Great web UI kit for designers,</li>
            <li>freelancers or business</li>
            <li>Live streaming</li>
        </ul>
    </footer>
</body>
</html>
